import React, { useState, useEffect} from 'react';
import axios from 'axios';
import './css/bg_gzt_rz.css'

function Rz() {
    const [val,setval] = useState('')
    
    function valchange(event){
        var str = event.target.value
        console.log(str);
        setval(str)
    }
    const [data, setData] = useState([]);
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/index/index',{
                    type:1,
                    page:1,
                    limit:15
                }
            );
            console.log(result.data);
            setData(result.data.data.list);
        };
        fetchData();
    }, []);
  for (let i = 0; i < data.length; i++) {
    if (data[i].create_user_info.img === '') {
        data[i].create_user_info.img = 'http://img3.hefei.cc/day_120417/20120417_eceb3191217a6e6d9f008vdg9Rl64W1g.jpg'
        
        }
        for (let j = 0; j < data[i].replyList.length; j++) {
            if (data[i].replyList[j].userInfo.thumb_img === '') {
                data[i].replyList[j].userInfo.thumb_img = 'http://img3.hefei.cc/day_120417/20120417_eceb3191217a6e6d9f008vdg9Rl64W1g.jpg'
            }
        
        }
    }
    if (data.length ===0) {
        console.log('000');
    }else{
        console.log('111')
    }
        
    function click(index){
        var hfnr=document.querySelectorAll('.hfnr')
        for (let i = 0; i < hfnr.length; i++) {
            hfnr[i].style.display='none'
            var a = true
        }
        if (a) {
            hfnr[index].style.display='block'
            a = false
        }else{
            hfnr[index].style.display='none'
            a = true
        }
    }
    function click1(index){
        var hfnr=document.querySelectorAll('.hfnr')
        hfnr[index].style.display='none'
    }

    function hf(index){
        if (val === '') {
           alert('请输入内容')
        }else{
            let id = data[index].action_id
            const fetchData = async () => {
                const result = await axios.post(
                    'http://crm.cimns.com/index.php/oa/log/commentSave',{
                        log_id: id,
                        content: val
                    }
                );
                
                const fetchData = async () => {
                    const result = await axios.post(
                        'http://crm.cimns.com/index.php/oa/index/index',{
                            type:1,
                            page:1,
                            limit:15
                        }
                    );
                    console.log(result.data);
                    setData(result.data.data.list);
                };
                fetchData();
            };
            fetchData();
        }
        setval('')
    }

  return (
    <div>
      {data.map((item,index) => ( 
        <div key={index} className = 'rz'>
            <div className='clearfix' style={{marginBottom : 10+'px'}}>
                <div><img alt='0' src={item.create_user_info.img}/></div>
                <div>
                    <span>{item.create_user_info.realname}</span>
                    <span>{item.action_content}</span>
                    <p>{item.create_time} &nbsp;&nbsp;&nbsp; 0各部门，0个同事</p>
                </div>
                
            </div>
            <ul>
                <li style={{display:item.content? 'block':'none'}} >今日工作内容：<span>{item.content}</span></li>
                <li style={{display:item.tomorrow? 'block':'none'}} >明日工作内容：<span>{item.tomorrow}</span></li>
                <li style={{display:item.question? 'block':'none'}} >遇到的问题：<span>{item.question}</span></li>
            </ul>
            <div>
                <ol>
                    {item.replyList.map((item1,index) => ( 
                        <div key ={index} className = 'rz1'>
                            <div className='clearfix' style={{marginBottom : 10+'px'}}>
                                <div><img alt='0' src={item1.userInfo.thumb_img}/></div>
                                <div>
                                    <span>{item1.realname}</span>
                                    <span>{item1.create_time}</span>
                                    <p>{item1.content}</p>
                                </div>
                            </div>


                            
                        </div>
                    ))}
                    <div className="hf">
                        <button onClick={()=>{click(index)}}>回复</button>
                        
                    </div>
                    <div className = 'hfnr'>
                        <div>
                            <textarea placeholder="请输入内容"  value={val} onChange={valchange} />
                        </div>
                        <div className="clearfix">
                            <img alt='0' src=""/>
                            <div>
                                <span onClick={()=>{hf(index)}}>回复</span>
                                <span onClick={()=>{click1(index)}}>取消</span>
                            </div>
                        </div>
                    </div>
                </ol>
            </div>
        </div> 
      ))}
    </div>
  );
}
export default Rz